.router-progress-bar {
    width: 100vw;
    height: 4px;
    overflow: hidden;
    background: rgba(221, 221, 221, 0.4);
    position: fixed;
    z-index: $zindex-base + 10;
    &::after {
        content: ' ';
        height: 100%;
        width: 33.3vw;
        animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear;
        display: block;
        transform-origin: top left;
    }
}

@mixin grad($hex) {
    background: linear-gradient(
        to right,
        rgba($hex,0) 0%,
        rgba($hex,1) 30%,
        rgba($hex,1) 50%,
        rgba($hex,1) 70%,
        rgba($hex,0) 100%
    );
}


@keyframes loadthird {
    0%   { transform: translateX(-33.3vw); }
    100% { transform: translateX(100vw); }
}

@keyframes gradcolours {
    0%  { @include grad(#e88098); }
    20% { @include grad(#84bebe); }
    40% { @include grad(#e98724); }
    60% { @include grad(#afc94e); }
    80% { @include grad(#6297a4); }
}
